<template>
	<view class="page-body">

		<view class="header">
			<view class="score">分数: {{score}}</view>
			<view class="btn_group" v-if="status == 2">
				<view class="btn" @click="stop">
					暂停
				</view>

			</view>
		</view>
		<view class="content_btn_group" v-if="status == 1 || status == 3">
			<view class="btn" @click="start">
				开始游戏
			</view>
		</view>
		<movable-area>

			<view class="main">
				<view v-for="(item,index) in peerList" class="peer"
					:style="{'position':'absolute','top':item.y+'px','left':item.x+'px'}">
					<image  v-if="item.status == 1" mode="widthFix" src="/static/enemy2_fly_1.png"></image>
					<image  v-if="item.status == 2" mode="widthFix" src="/static/blast.gif">
					</image>
				</view>
				<view class="bullet" :style="{'position':'absolute','top':item.y+'px','left':item.x+'px'}"
					v-for="(item,index) in bulletList">
					<image mode="widthFix" src="../../static/bullet1.png"></image>

				</view>
			</view>

			<movable-view :disabled="status==1" :x="old.x" :y="old.y" direction="all" @change="onChange">
				<image v-if="status!=3" class="myplane" mode="widthFix" src="/static/myplane.gif"></image>
				<image  v-if="status==3" class="myplane" mode="widthFix" src="/static/meblast.gif"></image>
			</movable-view>
		</movable-area>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				score: 0,
				bulletList: [

				],
				peerList: [], //对方主机
				x: 0,
				y: 0,
				scale: 2,
				old: {
					x: 0,
					y: 0,
					scale: 2
				},
				createBulletTime: {},
				bulletMoveTime: {},
				peerMoveTime: {},
				createPeerTime: {},
				claerPeerTime: {},
				plane: {
					width: this.rpxToPx(150),
					height: this.rpxToPx(180)
				},
				status: 1, //1 游戏未开始 2.已开始 3.已撞击
			}
		},
		watch: {
			peerList: {
				deep: true,
				handler(newVal, oldVal) {
					this.checkCrashPeer();
				}
			},
		},
		onLoad() {
			let that = this;
			that.init();
			// this.createBullet();
		},
		methods: {
			/**
			 * 对方战机移动
			 */
			peerMove() {
				var height = uni.getSystemInfoSync().windowHeight;
				this.peerList.forEach(function(item, index) {
					item.y += 1; //位移距离
					if (item.y >= height) {
						item.status = 3;
					}
				})

			},
			claerPeer() {
				let that = this;
				this.peerList.forEach(function(item, index) {
					if (item.status == 3) {
						that.peerList.splice(index, 1);
					}
				});
			},
			/**
			 * 判断是否撞机
			 */
			checkCrashPeer() {
				let that = this;
				var x = this.old.x;
				var y = this.old.y;
				var width = this.plane.width;
				var height = this.plane.height;
				this.peerList.forEach(function(item, index) {
					if (item.status == 1) {
						if (x >= item.x - width && x <= item.x + width) {
							if (y >= item.y - height * 2 && y <= item.y + height) {
								that.status = 3;
								item.status = 2;
								that.stop();
								//根据gif动画时长来设置
							}
						}
					}
				});
			},
			/**
			 * 创建战机
			 */
			createPeer() {
				var width = this.plane.width;
				var height = this.plane.height;
				var peer = {
					x: Math.floor(Math.random() * uni.getSystemInfoSync().windowWidth),
					y: -height,
					status: 1, //1.正常 2.爆炸中 3.阵亡
				}
				this.peerList.push(peer);

			},
			/**
			 * 开始游戏
			 */
			start() {
				if (this.status == 3) {
					this.init();
				}
				if (this.status == 2) {
					uni.showToast({
						title: "游戏已开始",
						icon: "none"
					})
					return;
				}
				this.status = 2;
				let that = this;
				this.createBulletTime = setInterval(function() {
					that.createBullet();
				}, 100)
				this.bulletMoveTime = setInterval(function() {
					that.bulletMove();
				}, 10)
				this.createPeerTime = setInterval(function() {
					//重新创建战机
					that.createPeer();
				}, 1000)
				this.peerMoveTime = setInterval(function() {
					that.peerMove();
				}, 10)
				this.claerPeerTime = setInterval(function() {
					that.claerPeer();
				}, 100)
			},
			/**
			 * 暂停游戏
			 */
			stop() {
				if (this.status != 3) {
					this.status = 1;
				}
				clearInterval(this.createBulletTime);
				clearInterval(this.bulletMoveTime);
				clearInterval(this.peerMoveTime);
				clearInterval(this.createPeerTime);
				clearInterval(this.claerPeerTime);
			},
			/**
			 * 判断子弹是否打中对方
			 * @param {Object} x 子弹x坐标
			 * @param {Object} y 子弹y坐标
			 */
			checkBulletPeer(x, y) {
				let that = this;
				//飞机的宽度
				var width = this.plane.width;
				var height = this.plane.height;
				this.peerList.forEach(function(item, index) {
					//飞机的高度
					if (item.status == 1) {
						if (x >= item.x && x <= item.x + width) {
							if (y >= item.y && y <= item.y + height) {
								item.status = 2;
								that.score++;
								setTimeout(function() {
									item.status = 3;

								}, 500);
								//根据gif动画时长来设置
							}
						}
					}


				})
			},
			/**
			 * 重新初始化
			 */
			init() {
				this.old.x = uni.getSystemInfoSync().windowWidth / 2 - this.rpxToPx(150 / 2)
				this.old.y = uni.getSystemInfoSync().windowHeight;
				this.bulletList = [];
				this.peerList = [];
				this.score = 0;
			},
			tap: function() {
				// 解决view层不同步的问题
				// this.x = this.old.x
				// this.y = this.old.y

			},
			/**
			 * 子弹移动
			 */
			bulletMove() {
				let that = this;
				this.bulletList.forEach(function(item, index) {
					item.y -= 10; //子弹每次移动距离
					// that.checkBulletPeer(item.x, item.y);
					// if (item.y < 0) {
					// 	that.bulletList.splice(index, 1);
					// }
				});
			},
			rpxToPx(rpx) {
				return Math.floor(uni.upx2px(rpx));
			},
			//创建子弹
			createBullet() {
				var width = this.plane.width;
				var height = this.plane.height;

				let that = this;
				let removeIndex = [];
				this.bulletList.forEach(function(item, index) {
					that.checkBulletPeer(item.x, item.y);
					if (item.y < 0) {
						removeIndex.push(index);
					}

				});
				removeIndex.forEach(function(item, index) {
					that.bulletList.splice(item, 1);
				});

				this.bulletList.push({
					x: this.old.x + width / 2,
					y: this.old.y - height / 2
				})
			},
			/**
			 * 我方战机移动
			 * @param {Object} e 战机移动坐标
			 */
			onChange: function(e) {
				this.old.x = e.detail.x
				this.old.y = e.detail.y
				// this.tap();
				// this.checkCrashPeer();
				// this.x = e.detail.x
				// this.y = e.detail.y
			}
		}
	}
</script>

<style lang="scss">
	.page-body {}

	.content_btn_group {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		bottom: 0;
		z-index: 1;

		.btn {
			border: 1px solid #666;
			color: #000;
			margin: 20rpx;
			padding: 20rpx;
			border-radius: 20rpx;
		}
	}

	.header {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.score {
		color: #000;
		font-size: 30rpx;
		text-align: center;
	}

	.btn_group {
		display: flex;

		flex-direction: row;

		.btn {
			border: 1px solid #666;
			color: #000;
			margin: 20rpx;
			padding: 20rpx;
			border-radius: 20rpx;
		}


	}

	movable-view {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 180rpx;
		width: 150rpx;
		color: #fff;
		position: absolute;
		bottom: 0;
	}

	.main {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.bullet {
		position: absolute;
		width: 10rpx;

		image {
			width: 10rpx;
		}
	}

	.peer {
		height: 180rpx;
		width: 150rpx;

		image {
			height: 180rpx;
			width: 150rpx;
		}
	}

	movable-area {
		background: url('/static/background_1.png');
		position: fixed;
		height: 750rpx;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		bottom: 0;
		height: 100%;
		/* background-color: #D8D8D8; */
		overflow: hidden;
	}


	.myplane {}
</style>
